<!-- Update 29.9.2015: <head></head> and <body></body> tags are included in this pen for quick copy/paste in case you to try this challenge offline -->

<html>
<head>
    <link rel="stylesheet" type="text/css" href="page.css">
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>Infinito Web Design Studio</title>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
        <div class="container topnav">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand topnav" href="http://virtual-dawn.com/index_english.html" target="_blank">Thiago Ferreira</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#home">Home</a>
                    </li>
                    <li>
                        <a href="#about">About</a>
                    </li>
                    <li>
                        <a href="#portfolio">Portfolio</a>
                    </li>
                   <li>
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>


    <!-- Header -->
    <a name="home"></a>
    <div class="intro-header">
      <div class="bg-overlay">
        <div class="container">
  

            <div class="row">
                <div class="col-lg-12">
                    <div class="intro-message">
                        <h1>Infinito Web Design Studio</h1>
                        <h3>Where Awesomeness Is Brought To Life.</h3>
                        <hr class="intro-divider">
                        <ul class="list-inline intro-social-buttons">
                            <li>
                                <a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                            </li>
                            <li>
                                <a href="https://github.com/ThiagoFerreir4" target="_blank" class="btn btn-default btn-lg "><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
                            </li>
                            <li>
                                <a href="https://www.linkedin.com/in/thiagoferreir4" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
                            </li>
                            <li>
                                <a href="http://www.freecodecamp.com/thiagoferreira" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->
      </div>
    </div>
    <!-- /.intro-header -->

 <!-- Page Content -->

	<a  name="about"></a>
    <div class="content-section-a">
      <div class="bg-overlay2">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    
                    <div class="clearfix"></div>
                  <h2 class="section-heading">Infinito Web Design Studio.</h2>
                  </br>
                    <p class="lead">I'm a <a class="link" target="_blank" href="http://www.freecodecamp.com/thiagoferreira">self taught</a> web designer, developer, co-founder and entrepreneur based in Finland.</br>
              I'm currently part of a small web development team in an upcoming start-up, building web and mobile applications.</br> 
My passion is to use technology based solutions, to help solve real world challenges.</br>
Competences:</br>
Languages and Frameworks:</br>
Javascript, HTML5, CSS3, jQuery, Bootstrap3, Angular.js, Meteor.js.</br>
Tools & expertise:</br>
Git, Responsive Web Design, Agile Methodologies.
</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6 collapse navbar-collapse">
                    <img class="img-circle img-responsive" src="https://41.media.tumblr.com/ccd0e1b1bdb3492eecdac39b8d42d7ad/tumblr_nwh4pmSv8k1ud7rr3o1_400.jpg" alt="">
                </div>
            </div>

        </div>
        <!-- /.container -->
      </div>
     </div>
    </div>
  
     <!-- Portfolio Grid Section -->
   <a  name="portfolio"></a>
    <section id="portfolio" class="bg-light-gray bounds">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Awesomeness Portfolio.</h2>
                    <h3 id="below-section" class="section-subheading text-muted">Below you'll find some of my recent work.</h3>
                </div>
            </div>
          <!-- Portfolio img1 -->
            <div class="row">
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="http://codepen.io/ThiagoFerreir4/full/gpvJOK" target="_blank" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-fire fa-3x"></i>
                            </div>
                        </div>
                        <img src="https://36.media.tumblr.com/a4a06b925ad2ad936ba2ce6c3343c444/tumblr_nwh4epTtMV1ud7rr3o1_1280.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Twitch.tv API project</h4>
                        <p id="small-text" class="text-muted">Bootstrap and Angularjs</p>
                    </div>
                </div>
              <!-- End of Portfolio img1 -->
              
              <!-- Portfolio img2 -->
                <div class="col-md-4 col-sm-6 portfolio-item portfolio2">
                    <a href="http://codepen.io/ThiagoFerreir4/full/vOyXre" class="portfolio-link" target="_blank" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-fire fa-3x"></i>
                            </div>
                        </div>
                        <img src="https://40.media.tumblr.com/a73e79ce9844761d7cdc93d202b5cea1/tumblr_nwh4iomduD1ud7rr3o1_1280.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Wikipedia Search Engine</h4>
                        <p id="small-text" class="text-muted">Bootstrap and jQuery</p>
                    </div>
                </div>
              <!-- End of Portfolio img2 -->
              
              <!-- Portfolio img3 -->
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="http://codepen.io/ThiagoFerreir4/full/QbKWGO" target="_blank" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-fire fa-3x"></i>
                            </div>
                        </div>
                        <img src="https://41.media.tumblr.com/5abea52ea28e9ea20ab995ebd23299a1/tumblr_nwh4iomduD1ud7rr3o2_1280.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Stainless Steel Calculator</h4>
                        <p id="small-text" class="text-muted">SCSS and Vanilla Javascript</p>
                    </div>
                </div>
              <!-- End of Portfolio img3 -->
              
              <!-- Portfolio img4 -->
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="http://codepen.io/ThiagoFerreir4/full/vOaRQz/" target="_blank" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-fire fa-3x"></i>
                            </div>
                        </div>
                        <img src="https://40.media.tumblr.com/7512ad23b7e68304a65182988b9c804a/tumblr_nwy76xfEXi1ud7rr3o1_1280.png" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Pomodoro Timer Zipline</h4>
                        <p id="small-text" class="text-muted">Bootstrap and Angular.js</p>
                    </div>
                </div>
              <!-- End of Portfolio img4 -->
              
              <!-- Portfolio img5 -->
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="http://codepen.io/ThiagoFerreir4/full/oXwKJV" target="_blank" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-fire fa-3x"></i>
                            </div>
                        </div>
                        <img src="https://41.media.tumblr.com/59b50efb8f7435fef9f87fd871b90d7a/tumblr_nxhm4k1jI81ud7rr3o1_1280.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Weather App</h4>
                        <p id="small-text" class="text-muted">Bootstrap and Vanilla Javascript</p>
                    </div>
                </div>
              <!-- End of Portfolio img5 -->
              
              <!-- Portfolio img6 -->
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="http://codepen.io/ThiagoFerreir4/full/EjwGoX/" target="_blank" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-fire fa-3x"></i>
                            </div>
                        </div>
                        <img src="https://36.media.tumblr.com/030b4966650a0d1dac0bbcca6fe572e8/tumblr_nxhm7qz6Y91ud7rr3o1_1280.jpg" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Pacman Tic Tac Toe</h4>
                        <p id="small-text" class="text-muted">CSS and jQuery</p>
                    </div>
                </div>
              <!-- End of Portfolio img6 -->
            </div>
        </div>
    </section>

	<a  name="contact"></a>
    <div class="banner">
      <div class="bg-overlay4">
        <div class="container">         
            <div class="row">
                <div class="col-lg-6">
                  <h2 class="connect">Connect with Infinito Web Design Studio: thiagoferreira.mail@gmail.com</h2>
                </div>
              </br>
      
                <div class="col-lg-6">
                    <ul class="list-inline banner-social-buttons">
                        <li>
                                <a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                            </li>
                            <li>
                                <a href="https://github.com/ThiagoFerreir4" target="_blank" class="btn btn-default btn-lg "><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
                            </li>
                            <li>
                                <a href="https://www.linkedin.com/in/thiagoferreir4" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
                            </li>
                            <li>
                                <a href="http://www.freecodecamp.com/thiagoferreira" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span></a>
                            </li>
                      
                    </ul>
                </div>
        </div>
        <!-- /.container -->
    </div>
</div>
</div>
</div>
    <!-- /.banner -->

    <!-- Footer -->
    <footer>
    
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <ul class="list-inline">
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li class="footer-menu-divider">&sdot;</li>
                        <li>
                            <a href="#about">About</a>
                        </li>
                        <li class="footer-menu-divider">&sdot;</li>
                        <li>
                            <a href="#portfolio">Portfolio</a>
                        </li>
                        <li class="footer-menu-divider">&sdot;</li>
                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                    </ul>
                    <p class="copyright text-muted small">Copyright &copy; Infinito Web Design Studio 2015. All Rights Reserved</p>
                </div>
            </div>
        </div>
    </footer>

    

</body>
</html>
